import React, { useState, useEffect } from 'react';
import { Howl } from 'howler';
import { Descriptions, Spin, Col, Row, Button } from 'antd';
import { GUI } from 'three/examples/jsm/libs/dat.gui.module';

let lu = 'one'
const sounds = {
  101: new Howl({
    src: ['./sound/101.mp3'],
  }),
  102: new Howl({
    src: ['./sound/102.mp3'],
  }),
  103: new Howl({
    src: ['./sound/103.mp3'],
  }),
  104: new Howl({
    src: ['./sound/104.mp3'],
  }),
  105: new Howl({
    src: ['./sound/105.mp3'],
  }),
  106: new Howl({
    src: ['./sound/106.mp3'],
  }),
  107: new Howl({
    src: ['./sound/107.mp3'],
  }),
  108: new Howl({
    src: ['./sound/108.mp3'],
  }),
  109: new Howl({
    src: ['./sound/109.mp3'],
  }),
  110: new Howl({
    src: ['./sound/110.mp3'],
  }),
  111: new Howl({
    src: ['./sound/111.mp3'],
  }),
  112: new Howl({
    src: ['./sound/112.mp3'],
  }),
  113: new Howl({
    src: ['./sound/113.mp3'],
  }),
};
const mapdata = {
  one: [
    {
      name: '起步',
      prompt: '转向，喇叭，挂挡，看后视镜，放手刹，平稳起步',
      point: {
        x: 95,
        y: 85,
      },
      start: '101',
    },
    {
      name: '路口直行',
      prompt: '路口前点一脚刹车，通过后建议继续上2车道',
      point: {
        x: 95,
        y: 125,
      },
      start: '102',
      end: '103',
    },
    {
      name: '变更车道',
      prompt: '语言开始播报时就提前开启左转向灯，看后视镜，提示结束后数三秒变道，建议变到一车道',
      point: {
        x: 95,
        y: 190,
      },
      start: '105',
      end: '103',
    },
    {
      name: '学校区域',
      prompt: '不要超过30迈，不要按喇叭，项目结束后开左转向准备自行掉头',
      point: {
        x: 95,
        y: 260,
      },
      end: '103',
    },
    {
      name: '自主掉头',
      prompt: '提前开左转向，没有语言提示，自主掉头，过了路上画的大拔叉，点一脚刹车，肩膀超过井盖，打死方向掉头，建议上3车道',
      point: {
        x: 110,
        y: 340,
      },
    },
    {
      name: '公交车站',
      prompt: '临近牌子点一脚刹车，手动挡减到1挡，可以提前开右转向准备下一个靠边停车',
      point: {
        x: 125,
        y: 300,
      },
      end: '103',
    },
    {
      name: '靠边停车',
      prompt: '凭实力靠边停车，挂p档，拉手刹，熄火，打左转向，油表显示清零后开车门数3秒关门，打火，挂挡，看后视镜，放手刹，起步',
      point: {
        x: 125,
        y: 260,
      },
      start: '106',
      end: '103',
    },
    {
      name: '路口右转',
      prompt: '停止线前点刹车，车头快到井盖的时候方向盘到12点左右时候再转',
      point: {
        x: 125,
        y: 160,
      },
      start: '107',
      end: '103',
    },
    {
      name: '人行横道',
      prompt: '车道临近牌子点刹车，如果在2车道记得自主变道至一车道，准备下一个自主掉头',
      point: {
        x: 165,
        y: 150,
      },
      end: '103',
    },
    {
      name: '自主掉头',
      prompt: '提前开左转向，没有语言提示，自主掉头，这里加了一段护栏，要多开一段，转向灯要一直开着，转过来适当给油，这里坡大，过来以后尽量走2车道',
      point: {
        x: 310,
        y: 140,
      },
    },
    {
      name: '会车',
      prompt: '过了人行横道开始会车，减速，靠右，一号线会车是上坡且道路弯曲，稍微给油并在会车过程中一直适当调整方向',
      point: {
        x: 220,
        y: 130,
      },
      start: '108',
      end: '103',
    },
    {
      name: '超车',
      prompt: '开转向，看镜子，油门速度踩过15迈且转向开够了3秒后左变道，变道后换右转向，保持5秒左右，同时油门踩到25-30之间，看镜子右转向',
      point: {
        x: 190,
        y: 130,
      },
      start: '109',
      end: '103',
    },
    {
      name: '自主右转',
      prompt: '超车完成后提前开右转向灯，没有语言提示，自主右转，停止线前点一脚刹车，车身完全出了人行横道后再右打到12点方向左右右转',
      point: {
        x: 140,
        y: 130,
      },
    },
    {
      name: '加减档',
      prompt: '自动挡福利环节，手动挡同学请凭实力加减档',
      point: {
        x: 120,
        y: 80,
      },
      start: '110',
      end: '103',
    },
    {
      name: '掉头',
      prompt: '如果不在1车道，提前变道至1车道，然后提前开左转向准备掉头，肩膀大概跟左边井盖平行的时候打死方向掉头',
      point: {
        x: 120,
        y: 0,
      },
      start: '111',
      end: '103',
    },
    {
      name: '直线行驶',
      prompt: '掉头过来建议使用2车道，提前摆正车身，看远处，看远处，看远处，保持20迈左右凭实力开一个直线行驶',
      point: {
        x: 100,
        y: 30,
      },
      start: '112',
      end: '103',
    },
    {
      name: '自主变道',
      prompt: '如果不在1车道，自主变道至1车道，提前打开左转向，准备后面的路口左转',
      point: {
        x: 100,
        y: 60,
      },
    },
    {
      name: '路口左转',
      prompt: '路口停止线前点一脚刹车，车头临近井盖的时候调至12点左右方向左转，过来以后建议走2车道',
      point: {
        x: 100,
        y: 120,
      },
      start: '113',
      end: '103',
    },
    {
      name: '终点',
      prompt: '开到这里也就过了科三了，恭喜恭喜',
      point: {
        x: 150,
        y: 150,
      },
    },
  ],
  two: [
    {
      name: '起步',
      prompt: '转向，喇叭，挂挡，看后视镜，放手刹，平稳起步',
      point: {
        x: 120,
        y: 345,
      },
      start: '101',
    },
    {
      name: '路口直行',
      prompt: '路口前点一脚刹车，通过后继续执行，过了桥洞再变道比较方便',
      point: {
        x: 110,
        y: 265,
      },
      start: '102',
      end: '103',
    },
    {
      name: '自主变道',
      prompt: '这里变道没有线，可以不打转向，过了桥洞以后在没有线的位置换到2车道，方便后面转弯',
      point: {
        x: 110,
        y: 200,
      },
    },
    {
      name: '学校区域',
      prompt: '不要超过30迈，不要按喇叭，项目结束第一个路口不拐弯，直行通过，下一个路口才右转',
      point: {
        x: 120,
        y: 160,
      },
      end: '103',
    },
    {
      name: '路口右转',
      prompt: '停止线前点刹车，提前打转向，转过去建议上2车道',
      point: {
        x: 120,
        y: 30,
      },
      start: '107',
      end: '103',
    },
    {
      name: '加减档',
      prompt: '自动挡福利环节，手动挡同学请凭实力加减档',
      point: {
        x: 140,
        y: 20,
      },
      start: '110',
      end: '103',
    },
    {
      name: '人行横道',
      prompt: '车道临近牌子点刹车，如果在二车道，项目结束后正好直行上一车道',
      point: {
        x: 220,
        y: 20,
      },
      end: '103',
    },
    {
      name: '掉头',
      prompt: '提前开左转向，这里转过来有个路牙子，为了防止转不过来，车身超过井盖的时候再掉头，掉头后上2车道',
      point: {
        x: 300,
        y: 20,
      },
      start: '111',
      end: '103',
    },
    {
      name: '超车',
      prompt: '开转向，看镜子，油门速度踩过15迈且转向开够了3秒后左变道，变道后换右转向，保持5秒左右，同时油门踩到25-30之间，看镜子右转向',
      point: {
        x: 290,
        y: 8,
      },
      start: '109',
      end: '103',
    },
    {
      name: '人行横道',
      prompt: '这里有个人行横道，2车道直行通过后正好上1车道',
      point: {
        x: 240,
        y: 6,
      },
      end: '103',
    },
    {
      name: '直线行驶',
      prompt: '道路过了一个小弯以后，摆正车身，保持20迈左右目视前方开一个直线行驶',
      point: {
        x: 200,
        y: 4,
      },
      start: '112',
      end: '103',
    },
    {
      name: '路口左转',
      prompt: '路口停止线前点一脚刹车，过来以后上2车道，下一个项目要靠边停车啦',
      point: {
        x: 140,
        y: 4,
      },
      start: '113',
      end: '103',
    },
    {
      name: '靠边停车',
      prompt: '凭实力靠边停车，挂p档，拉手刹，熄火，打左转向，油表显示清零后开车门数3秒关门，打火，挂挡，看后视镜，放手刹，起步',
      point: {
        x: 90,
        y: 40,
      },
      start: '106',
      end: '103',
    },
    {
      name: '人行横道',
      prompt: '这里有个人行横道，过去以后就要开始会车了',
      point: {
        x: 90,
        y: 100,
      },
      end: '103',
    },
    {
      name: '会车',
      prompt: '过了人行横道开始会车，减速，靠右，二号线会车是弯路，记不断得调方向盘',
      point: {
        x: 90,
        y: 150,
      },
      start: '108',
      end: '103',
    },
    {
      name: '公交车站',
      prompt: '临近牌子点一脚刹车',
      point: {
        x: 90,
        y: 180,
      },
      end: '103',
    },
    {
      name: '变更车道',
      prompt: '这里在1车道比较好，变更完以后就结束考试靠边了',
      point: {
        x: 100,
        y: 250,
      },
      start: '105',
      end: '103',
    },
    {
      name: '终点',
      prompt: '开到这里也就过了科三了，恭喜恭喜',
      point: {
        x: 90,
        y: 300,
      },
    },
  ],
  three: [
    {
      name: '起步',
      prompt: '转向，喇叭，挂挡，看后视镜，放手刹，平稳起步',
      point: {
        x: 250,
        y: 160,
      },
      start: '101',
    },
    {
      name: '超车',
      prompt: '开转向，看镜子，油门速度踩过15迈且转向开够了3秒后左变道，变道后换右转向，保持5秒左右，同时油门踩到25-30之间，看镜子右转向',
      point: {
        x: 240,
        y: 140,
      },
      start: '109',
      end: '103',
    },
    {
      name: '自主变道',
      prompt: '如果不在1车道，自主变道至1车道，方便后面掉头',
      point: {
        x: 240,
        y: 100,
      },
    },
    {
      name: '学校区域',
      prompt: '不要超过30迈，不要按喇叭',
      point: {
        x: 240,
        y: 80,
      },
      end: '103',
    },
    {
      name: '人行横道',
      prompt: '车道临近牌子点刹车',
      point: {
        x: 240,
        y: 60,
      },
      end: '103',
    },
    {
      name: '加减档',
      prompt: '自动挡福利环节，手动挡同学请凭实力加减档',
      point: {
        x: 240,
        y: 40,
      },
      start: '110',
      end: '103',
    },
    {
      name: '掉头',
      prompt: '提前开左转向,停止线前踩刹车，掉头注意看那个井盖，过来上2车道，准备直线行驶',
      point: {
        x: 240,
        y: 0,
      },
      start: '111',
      end: '103',
    },
    {
      name: '直线行驶',
      prompt: '掉头过来建议使用2车道，提前摆正车身，保持20迈左右，向前看，凭实力开一个直线行驶',
      point: {
        x: 220,
        y: 10,
      },
      start: '112',
      end: '103',
    },
    {
      name: '路口直行',
      prompt: '路口前点一脚刹车，通过后继续执行，过了桥洞再变道比较方便',
      point: {
        x: 220,
        y: 50,
      },
      start: '102',
      end: '103',
    },
    {
      name: '会车',
      prompt: '直线完了就是会车，减速，靠右，虚线变实现的时候开始会车',
      point: {
        x: 220,
        y: 80,
      },
      start: '108',
      end: '103',
    },
    {
      name: '公交车站',
      prompt: '临近牌子点一脚刹车',
      point: {
        x: 220,
        y: 120,
      },
      end: '103',
    },
    {
      name: '变更车道',
      prompt: '语言开始播报时就提前开启右转向灯，看后视镜，提示结束后数三秒变道，变到三车道，下一个项目要靠边停车了',
      point: {
        x: 220,
        y: 220,
      },
      start: '105',
      end: '103',
    },
    {
      name: '靠边停车',
      prompt: '凭实力靠边停车，挂p档，拉手刹，熄火，打左转向，油表显示清零后开车门数3秒关门，打火，挂挡，看后视镜，放手刹，起步',
      point: {
        x: 220,
        y: 260,
      },
      start: '106',
      end: '103',
    },
    {
      name: '路口右转',
      prompt: '停止线前点刹车，车身出线到合适位置以后再转',
      point: {
        x: 220,
        y: 300,
      },
      start: '107',
      end: '103',
    },
    {
      name: '人行横道',
      prompt: '车道临近牌子点刹车',
      point: {
        x: 190,
        y: 310,
      },
      end: '103',
    },
    {
      name: '自主掉头',
      prompt: '提前开左转向，没有语言提示，自主掉头，这里加了一段护栏，要多开一段，转向灯要一直开着，转过来适当给油，这里坡大，过来可以走1车道',
      point: {
        x: 130,
        y: 310,
      },
    },
    {
      name: '路口左转',
      prompt: '路口停止线前点一脚刹车，这里注意快到路口千万不能压实线，实线都快磨得看不见了',
      point: {
        x: 210,
        y: 320,
      },
      start: '113',
      end: '103',
    },
    {
      name: '终点',
      prompt: '开到这里也就过了科三了，恭喜恭喜',
      point: {
        x: 250,
        y: 280,
      },
    },
  ],
};
// const gui = new GUI();
const opt = {
  x: 285,
  y: 285,
};
// gui.add(opt, 'x');
// gui.add(opt, 'y');

const img1 = new Image();
img1.src = './img/home.png';
const Index: React.FC = () => {
  const [loadingSpinning, setLoadingSpinning] = useState(true);
  const [tip, setTip] = useState(0);
  const [ischecked, setIschecked] = useState(false);
  const [title, setTitle] = useState('新华远考点科三模拟器');
  const [soundNum, setSoundNum] = useState(Object.keys(sounds).length);
  const [step, setStep] = useState(0);
  let number = 0;
  const isLoading = () => {
    let baifenbi = number / soundNum;
    if (baifenbi == 1) {
      setLoadingSpinning(false);
    } else {
      setTip(Math.round(baifenbi * 10000) / 100 + '%');
    }
  };
  const zuobiao = new Image();
  zuobiao.src = './img/zuobiao.png';
  const draw = () => {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 375, 375);
    ctx.drawImage(img1, 0, 0);
    ctx.drawImage(zuobiao, opt.x, opt.y);
  };
  const move = (obj, target, callback) => {
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
      let stepx = (target.x - obj.x) / 10;
      let stepy = (target.y - obj.y) / 10;
      stepx = stepx > 0 ? Math.ceil(stepx) : Math.floor(stepx);
      stepy = stepy > 0 ? Math.ceil(stepy) : Math.floor(stepy);
      if (obj.x == target.x && obj.y == target.y) {
        clearInterval(obj.timer);
        if (callback) {
          callback();
        }
      }
      obj.x = obj.x + stepx;
      obj.y = obj.y + stepy;
    }, 15);
  };
  useEffect(() => {
    for (const k in sounds) {
      sounds[k].once('load', function () {
        number = number + 1;
        isLoading();
      });
      if(k!=104){
        sounds[k].on('end', function(){
          sounds[104].play();
        });
      }
    }
    // 启动页面动画渲染
    const animate = () => {
      draw();
      window.requestAnimationFrame(animate);
    };
    window.requestAnimationFrame(animate);
  }, []);

  return (
    <div style={{ textAlign: 'center' }}>
      {title}
      <Spin tip={'加载' + tip} spinning={loadingSpinning}>
        <canvas
          id="myCanvas"
          height={375}
          width={375}
          style={{
            border: '2px solid #26dafd',
            height: 375,
            width: 375,
          }}
        >
          您的浏览器不支持 HTML5 canvas 标签。
        </canvas>
        {ischecked?(<>
          <Descriptions>
          <Descriptions.Item label="当前动作">
            {mapdata[lu][step].name}
          </Descriptions.Item>
          <Descriptions.Item label="提示">
            {mapdata[lu][step].prompt}
          </Descriptions.Item>
          <Descriptions.Item label="下一个动作">
            {mapdata[lu][step + 1] ? mapdata[lu][step + 1].name : '准备科四'}
          </Descriptions.Item>
        </Descriptions>
        <Row gutter="48">
          <Col span="24">
            <Button
              disabled={!mapdata[lu][step - 1]}
              style={{ width: '100%' }}
              onClick={() => {
                move(opt, {
                  x: mapdata[lu][step - 1].point.x,
                  y: mapdata[lu][step - 1].point.y,
                });
                setStep(step - 1);
              }}
            >
              上一步
            </Button>
          </Col>
          <Col span="12" style={{ marginTop: 20 }}>
            {mapdata[lu][step].start ? (
              <Button
                style={{ width: '100%' }}
                onClick={() => {
                  sounds[mapdata[lu][step].start].play();
                }}
              >
                项目开始
              </Button>
            ) : (
              ''
            )}
          </Col>
          <Col span="12" style={{ marginTop: 20 }}>
            {mapdata[lu][step].end ? (
              <Button
                style={{ width: '100%' }}
                onClick={() => {
                  sounds[mapdata[lu][step].end].play();
                }}
              >
                项目结束
              </Button>
            ) : (
              ''
            )}
          </Col>
          <Col span="24" style={{ marginTop: 20 }}>
            <Button
              disabled={!mapdata[lu][step + 1]}
              style={{ width: '100%' }}
              onClick={() => {
                move(opt, {
                  x: mapdata[lu][step + 1].point.x,
                  y: mapdata[lu][step + 1].point.y,
                });
                setStep(step + 1);
              }}
            >
              下一步
            </Button>
          </Col>
          <Col span="24" style={{ marginTop: 20 }}>
            <Button
              style={{ width: '100%' }}
              onClick={() => {
                setTitle('新华远考点科三模拟器');
                setIschecked(false);
                img1.src = './img/home.png';
                setStep(0);
                move(opt, {
                  x: 285,
                  y: 285,
                });
              }}
            >
              返回选择路线
            </Button>
          </Col>
        </Row>
        </>
        ):(
          <Row gutter="48">
          <Col span="24" style={{ marginTop: 20 }}>
            <Button
              disabled={!mapdata[lu][step + 1]}
              style={{ width: '100%' }}
              onClick={() => {
                setTitle('新华远一号线');
                setIschecked(true);
                img1.src = './img/1.png';
                lu = 'one';
                setStep(0);
                move(opt, {
                  x: 95,
                  y: 85,
                });
              }}
            >
              新华远一号线
            </Button>
          </Col>
          <Col span="24" style={{ marginTop: 20 }}>
            <Button
              disabled={!mapdata[lu][step + 1]}
              style={{ width: '100%' }}
              onClick={() => {
                setTitle('新华远二号线');
                setIschecked(true);
                img1.src = './img/2.png';
                lu = 'two';
                setStep(0);
                move(opt, {
                  x: 120,
                  y: 345,
                });
              }}
            >
              新华远二号线
            </Button>
          </Col>
          <Col span="24" style={{ marginTop: 20 }}>
            <Button
              disabled={!mapdata[lu][step + 1]}
              style={{ width: '100%' }}
              onClick={() => {
                setTitle('新华远三号线');
                setIschecked(true);
                img1.src = './img/3.png';
                lu = 'three';
                setStep(0);
                move(opt, {
                  x: 250,
                  y: 160,
                });
              }}
            >
              新华远三号线
            </Button>
          </Col>
        </Row>
        )}
        
      </Spin>
    </div>
  );
};
export default Index;
